<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-form inline size="small" @submit.native.prevent>
        <el-form-item label="用户搜索：">
          <el-input v-model="listPram.keyWord" placeholder="请输入姓名或手机号" clearable class="selWidth"/>
        </el-form-item>
        <el-form-item label="问题类型：">
<!--          <el-input v-model="listPram.questionType" placeholder="问题类型" clearable class="selWidth"/>-->
          <el-select v-model="listPram.questionType" placeholder="问题类型" clearable class="selWidth">
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <template v-if="JavaInfo.roles === 1">
          <!-- 超级管理员才可筛选单位 -->
          <el-form-item label="派件单位：">
            <el-select v-model="listPram.selectDepId" placeholder="派件单位" clearable class="selWidth">
              <el-option
                v-for="item in selectDepList.list"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </template>
        <el-form-item label="提交时间：">
          <el-date-picker
            v-model="listPram.selectCrtTime"
            value-format="yyyy-MM-dd" format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期" class="timeWidth">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="状态：">
          <!--          <el-input v-model="listPram.questionType" placeholder="问题类型" clearable class="selWidth"/>-->
          <el-select v-model="listPram.status" placeholder="状态" clearable class="selWidth">
            <el-option label="待派件" :value="0"/>
            <el-option label="处理中" :value="1"/>
            <el-option label="已整改" :value="5"/>
<!--            <el-option label="已逾期" :value="2"/>-->
            <el-option label="已结案" :value="3"/>
            <el-option label="已驳回" :value="4"/>
            <el-option label="已申诉" :value="6"/>
          </el-select>
        </el-form-item>
        <el-form-item label="是否逾期：">
          <!--          <el-input v-model="listPram.questionType" placeholder="问题类型" clearable class="selWidth"/>-->
          <el-select v-model="listPram.isOverdue" placeholder="是否逾期" clearable class="selWidth">
            <el-option label="正常" :value="1"/>
            <el-option label="已逾期" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" size="mini" type="primary" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <el-button icon="el-icon-folder-opened" size="mini" type="primary" plain @click="derive">导出</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="listData.list" class="table" v-loading="loading" size="mini" :header-cell-style=" {fontWeight:'bold',background:'#f8f8f9',color: '#515a6e',height:'40px'}" border>
        <el-table-column
          prop="id"
          label="ID"
          width="50"
        />
        <el-table-column
          label="头像" min-width="50">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image
                style="width: 36px; height: 36px"
                :src="scope.row.faceUrl"
                :preview-src-list="[scope.row.faceUrl]"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="用户昵称及手机号"
          min-width="120"
        >
          <template slot-scope="scope">
            <span>{{scope.row.userName}} | {{scope.row.mobile }} </span>
          </template>
        </el-table-column>
<!--        <el-table-column-->
<!--          label="姓名"-->
<!--          min-width="100"-->
<!--        >-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{scope.row.realName   }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="问题类型" prop="type" min-width="80">
          <template slot-scope="scope">
            <div class="content">{{scope.row.questionTypeText}}</div>

          </template>
        </el-table-column>
        <el-table-column prop="content" label="描述" min-width="80">
          <template slot-scope="scope">
            <div class="content" :class="{showMore:!scope.row.show}">{{scope.row.content | filterEmpty}}</div>
            <span @click="showMore(scope.row,true)" v-show="!scope.row.show && scope.row.content" style="color:#0080ff;cursor:pointer;">显示更多</span>
            <span @click="showMore(scope.row,false)" v-show="scope.row.show && scope.row.content" style="color:#0080ff;cursor:pointer;">收起</span>
          </template>
        </el-table-column>
        <el-table-column label="派件单位" min-width="60">
          <template slot-scope="scope">
            <span>{{scope.row.depText | filterEmpty}}</span>
          </template>
        </el-table-column>
        <el-table-column label="期限" min-width="60">
          <template slot-scope="scope">
            <span>{{scope.row.termText | filterEmpty}}</span>
          </template>
        </el-table-column>
        <!-- v-if="JavaInfo.roles === 1" -->
        <el-table-column label="状态" prop="statusText" min-width="60" >
          <template slot-scope="scope">
            <div v-if="scope.row.status===0">-</div>
            <div style="color:#1890ff;" v-if="scope.row.status===1">处理中</div>
            <div style="color:yellowgreen;" v-if="scope.row.status===5">已处理</div>
<!--            <div style="color:orange;" v-if="scope.row.status===2">已逾期</div>-->
            <div style="color:#79c68c;" v-if="scope.row.status===3">已结案</div>
            <div style="color:red;" v-if="scope.row.status===4">已驳回</div>
            <div style="color:#FE7526;" v-if="scope.row.status===6">已申诉</div>
          </template>
        </el-table-column>
        <el-table-column label="是否逾期" min-width="80">
          <template slot-scope="scope">
            <span  style="color:red;display:flex;justify-content: center;" v-if="scope.row.isOverdue===2">{{scope.row.isOverdueText | filterEmpty}}</span>
            <span  style="color:#1890ff;display:flex;justify-content: center;" v-if="scope.row.isOverdue===1">{{scope.row.isOverdueText | filterEmpty}}</span>
          </template>
        </el-table-column>
        <el-table-column label="提交时间" prop="crtTime" min-width="80"/>
        <el-table-column label="派件时间" min-width="80">
          <template slot-scope="scope">
            <span>{{scope.row.statusTime | filterEmpty}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="215" align="center" fixed="right">
          <template slot-scope="scope">
            <template v-if="!scope.row.depId || (scope.row.depId && scope.row.appeal === 1)">
              <!-- 初次派件都可以操作，即depID==null
              当depId不为0想再次派件，需要有申诉，即depId!=null&appeal=1 -->
              <el-button icon="el-icon-set-up" type="success" size="mini" @click="setAssign(scope.row)" v-if="checkPermi(['admin:photo:assign'])">派件</el-button>
            </template>
            <el-button icon="el-icon-set-up" type="success" size="mini" @click="setDeal(scope.row)" v-if="checkPermi(['admin:photo:save'])">处理</el-button>
            <el-button icon="el-icon-edit" type="primary" size="mini" @click="onDetails(scope.row.id)" v-hasPermi="['admin:photo:info']">详情</el-button>
            <template v-if="JavaInfo.roles !== 1 && [3,4,5].indexOf(scope.row.status)===-1">
              <!-- 处理后就不能申诉了 -->
              <el-button icon="el-icon-delete" type="danger" size="mini" @click="setAppeal(scope.row)" v-if="checkPermi(['admin:photo:appeal'])">申诉</el-button>
            </template>
            <template v-if="JavaInfo.roles === 1 && scope.row.appeal === 1">
              <el-button icon="el-icon-view" type="warning" size="mini" @click="setAppeal(scope.row)">查看申诉</el-button>
            </template>
            <el-button icon="el-icon-delete" type="danger" size="mini" @click="handlerOpenDel(scope.row)" v-hasPermi="['admin:photo:delete']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="listPram.page"
        :page-sizes="constants.page.limit"
        :layout="constants.page.layout"
        :total="listData.count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!--详情-->
    <el-dialog
      title="随手拍详情"
      :visible.sync="Visible"
      width="1100px"
      v-if="id"
      :before-close="hideEditDialog">
      <edit
        ref="photoDetails"
        :id="id"
        v-if="Visible"
        :all-type-list="typeList"
        :all-term-list="termList"
        @hideEditDialog="hideEditDialog"></edit>
    </el-dialog>
    <!--派件-->
    <el-dialog
      title="派件"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="Close">
      <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic" v-loading="loading">
        <el-form-item
          prop="depId"
          label="单位："
          :rules="[{ required: true, message: '请选择单位', trigger: 'change' }]"
        >
          <el-select v-model="dynamicValidateForm.depId" placeholder="请选择单位" style="width: 90%" filterable>
            <el-option :value="item.id" v-for="(item, index) in departmentList" :key="index" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="期限：" prop="termId" :rules="[{ required: true, message: '请选择期限', trigger: 'change' }]" key="1">
          <el-select v-model="dynamicValidateForm.termId" placeholder="期限" clearable style="width: 90%">
            <el-option
              v-for="(item,index) in termList"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Close">取 消</el-button>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')">确 定</el-button>
      </span>
    </el-dialog>
    <!--处理-->
    <el-dialog
      title="处理"
      :visible.sync="dealDialogVisible"
      width="900px"
      :before-close="Close1">
      <el-form :model="dealDynamicValidateForm" ref="dealDynamicValidateForm" label-width="100px" class="demo-dynamic" v-loading="dealLoading">
        <el-form-item label="处理内容：" prop="content" :rules="[{ required: true, message: '请填处理内容', trigger: 'blur' }]">
          <el-input v-model="dealDynamicValidateForm.content" type="textarea" :rows="7" placeholder="处理内容"/>
        </el-form-item>
        <el-form-item :label="'图片('+dealDynamicValidateForm.resultUrl.length +'/5)：'">
          <div class="acea-row" v-if="dealDynamicValidateForm.resultUrl">
            <div
              v-for="(item,index) in dealDynamicValidateForm.resultUrl"
              :key="index"
              class="pictrue mb10"
              draggable="true"
              @dragstart="handleDragStart($event, item)"
              @dragover.prevent="handleDragOver($event, item)"
              @dragenter="handleDragEnter($event, item)"
              @dragend="handleDragEnd($event, item)"
            >
              <el-image
                class="photo-el-image"
                :src="item"
                :preview-src-list="dealDynamicValidateForm.resultUrl"
              />
              <i v-if="!isDisabled" class="el-icon-error btndel" @click="handleRemove(index)"/>
            </div>
<!--            <div v-if="dealDynamicValidateForm.resultUrl.length<6 && !isDisabled" class="upLoadPicBox" @click="modalPicTap('2')">-->
            <div v-if="dealDynamicValidateForm.resultUrl.length<5 && !isDisabled" class="upLoadPicBox">
              <el-tooltip
                class="item"
                effect="dark"
                content="上传图片"
                placement="top-start"
              >
                <el-upload
                  class="upload-demo"
                  action
                  accept="image/gif,image/jpeg,image/png"
                  :before-upload="onBeforeUpload"
                  :http-request="handleUploadForm"
                  :on-change="imgSaveToUrl"
                  :headers="myHeaders"
                  :show-file-list="false"
                >
                  <el-button
                    icon="el-icon-plus"
                    class="mr15 definedArea"
                    style="width:120px;height:120px;"
                  ></el-button>
                </el-upload>
              </el-tooltip>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Close1">取 消</el-button>
        <el-button type="primary" @click="submitDealForm('dealDynamicValidateForm')">确 定</el-button>
      </span>
    </el-dialog>
    <!--申诉-->
    <el-dialog
      title="申诉"
      :visible.sync="appealDialogVisible"
      width="500px"
      :before-close="Close2">
      <el-form :model="appealDynamicValidateForm" ref="appealDynamicValidateForm" label-width="80px" class="demo-dynamic" v-loading="appealLoading">
        <el-form-item label="内容：" prop="content">
          <el-input v-model="appealDynamicValidateForm.content" type="textarea" :rows="7" placeholder="内容"/>
          <div class="tips" v-if="checkPermi(['admin:photo:appeal'])">内容留空代表取消申诉</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="checkPermi(['admin:photo:appeal'])">
        <el-button @click="Close2">取 消</el-button>
        <el-button type="primary" @click="submitAppealForm('appealDynamicValidateForm')">确 定</el-button>
      </span>
    </el-dialog>
    <!--详情-->
    <el-dialog
      :visible.sync="editDialogConfig.visible"
      :title="editDialogConfig.isCreate === 0? '创建随手拍':'处理随手拍'"
      destroy-on-close
      :close-on-click-modal="false"
      width="700px"
    >
      <edit
        v-if="editDialogConfig.visible"
        :is-create="editDialogConfig.isCreate"
        :edit-data="editDialogConfig.editData"
        :all-type-list="typeList"
        @hideEditDialog="hideEditDialog"
      />
    </el-dialog>
  </div>
</template>

<script>
import * as computerApi from '@/api/computer.js'
import * as systemSetting from '@/api/systemSetting.js'
import * as roleApi from '@/api/role.js'
import edit from './edit'
import { checkPermi } from "@/utils/permission";
import * as selfUtil from "@/utils/ZBKJIutil";
import * as categoryApi from "@/api/categoryApi";
import { staticTypeList } from '@/utils/constants'
import {exportExcelApi, getFormRemarkById, photoList} from '@/api/computer.js'
import {mapGetters} from "vuex";
import {getFormDepartment} from "@/api/role.js";
import {updateFormDep} from "@/api/user";
import {getToken} from "@/utils/auth";
import Cookies from "js-cookie";
import { categoryTermList } from '@/api/categoryApi'
import store from '@/store' // 权限判断函数
import {createFile} from "@/utils/utils";
export default {
  // name: "index"
  components: { edit },
  filters: {
    sexFilter(status) {
      const statusMap = {
        0: '未知',
        1: '男',
        2: '女',
        3: '保密'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      myHeaders: { "X-Token": getToken() },
      JavaInfo: JSON.parse(Cookies.get("JavaInfo")),
      isDisabled: this.$route.params.isDisabled==='1'?true:false,
      constants:this.$constants,
      loading:false,
      dealLoading:false,
      appealLoading:false,
      listData: { list: [] },
      listPram: {
        keyWord: '',
        status:null,
        selectCrtTime:[],
        selectDepId:null,
        isOverdue:null,
        /*departmentId: null,
        ipAddress: null,
        macAddress: null,
        personId: null,*/
        questionType:null,
        page: 1,
        limit: this.$constants.page.limit[0]
      },
      editDialogConfig: {
        visible: false,
        isCreate: 0, // 0=创建，1=编辑
        editData: {}
      },
      typeList:[],
      termList:[],
      selectDepList:{
        list:[]
      },//超级管理员筛选派件单位列表

      id:0,
      Visible:false,

      departmentList:[],
      dialogVisible: false,//派件dialog
      dynamicValidateForm:{
        id:0,
        depId: '',
        termId:'',
      },

      dealDialogVisible: false,//处理dialog
      dealDynamicValidateForm:{
        id:0,
        content:'',
        resultUrl: [],
      },

      appealDialogVisible: false,//申诉dialog
      appealDynamicValidateForm:{
        id:0,
        content:'',
      },
    }
  },
  mounted() {
    this.handleGetPhotoList()
    this.initTypeList() //当前使用人员
    this.initTermList()
    this.handleGetSelectDepList()
  },
  methods: {
    checkPermi,
    //控制长文本显示和收起
    showMore (row, flag) {
      this.$set(row,'show',flag)
    },

    //图片上传有关
    onBeforeUpload(file) {
      const isIMAGE = file.type === 'image/jpg'||'image/gif'||'image/png';
      const isLt1M = file.size / 1024 / 1024 < 10;

      if (!isIMAGE) {
        this.$message.error('上传文件只能是jpg、png或gif格式!');
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 10MB!');
      }
      return isIMAGE && isLt1M;
    },
    // 上传
    handleUploadForm(param) {
      const formData = new FormData();
      formData.append("file", param.file);
      let loading = this.$loading({
        lock: true,
        text: "上传中，请稍候...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      systemSetting.fileImageApi(formData).then((res) => {
        //图片上传接口 后期调用
        this.dealDynamicValidateForm.resultUrl.push(res)

        loading.close();
        this.$message.success("上传成功");
      })
        .catch((res) => {
          loading.close();
        });
    },
    // 选取图片后自动回调，里面可以获取到文件
    imgSaveToUrl(event) {
      // 也可以用file
      this.localFile = event.raw; // 或者 this.localFile=file.raw

      // 转换操作可以不放到这个函数里面，
      // 因为这个函数会被多次触发，上传时触发，上传成功也触发
      let reader = new FileReader();
      reader.readAsDataURL(this.localFile); // 这里也可以直接写参数event.raw

      // 转换成功后的操作，reader.result即为转换后的DataURL ，
      // 它不需要自己定义，你可以console.integralLog(reader.result)看一下
      reader.onload = () => {
        //console.integralLog(reader.result)
      };

      /* 另外一种本地预览方法 */

      let URL = window.URL || window.webkitURL;
      this.dialogImageUrl = URL.createObjectURL(event.raw);
      // 转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
    },

    handleGetSelectDepList() {
      const _pram = {
        page: 1,
        limit: 1000,
      }
      computerApi.comList(_pram).then(res => {
        this.selectDepList = res;
      })
    },

    initTermList() {
      /*const _pram = {
        page: 1,
        limit: this.constants.page.limit[4],
      }*/
      categoryApi.categoryTermList().then(res => {
        this.termList = res;
      })
    },
    initTypeList(){
      this.loading = true
      categoryApi.categoryElcAccountList().then(data => {
        //let data = this.constants.staticTypeList
        this.typeList = data
        this.loading = false
      }).catch(()=>{
        this.loading = false
      })
    },

    handleSearch() {
      this.listPram.page = 1
      this.handleGetPhotoList()
    },
    handleSizeChange(val) {
      this.listPram.limit = val
      this.handleGetPhotoList()
    },
    handleCurrentChange(val) {
      this.listPram.page = val
      this.handleGetPhotoList()
    },
    handlerOpenDel(rowData) {
      this.$confirm('确认删除当前数据').then(() => {
        const _pram = { id: rowData.id}
        computerApi.comDel(_pram).then(data => {
          this.$message.success('删除数据成功')
          this.handleGetPhotoList()
        })
      })
    },
    handleGetPhotoList() {
      computerApi.photoList( this.listPram ).then(data => {
        this.listData = data
      })
    },

    handlerOpenEdit(editDate) {
      this.editDialogConfig.editData = editDate
      this.editDialogConfig.visible = true
    },

    //派件
    setAssign(row){
      if(row){
        //this.userIds = row.uid
        this.dynamicValidateForm.id = row.id
        //console.log(row)
        roleApi.getFormDepartment({id:this.dynamicValidateForm.id}).then(res => {
          this.departmentList = res;

          let arr = [];
          res.forEach(item=>{
            arr.push(item.id);
          })
          if(!arr.includes(Number.parseInt(this.dynamicValidateForm.depId))){
            this.$set(this.dynamicValidateForm,'depId','');
          }
        })

        let arr1 = [];
        this.termList.forEach(item=>{
          arr1.push(item.id);
        })
        if(!arr1.includes(Number.parseInt(this.dynamicValidateForm.termId))){
          this.$set(this.dynamicValidateForm,'termId','');
        }
        this.dynamicValidateForm.depId = row.depId?Number(row.depId):''
        this.dynamicValidateForm.termId = row.termId?Number(row.termId):''
      }else{
        this.dynamicValidateForm.id = 0
        this.dynamicValidateForm.depId = ''
        this.dynamicValidateForm.termId = ''
      }
      //if (this.multipleSelectionAll.length === 0 && !row) return this.$message.warning('请选择要设置的用户')
      this.dialogVisible = true
    },
    submitForm(formName) {
      // let data = [];
      // if(!this.userIds){
      //   if(this.multipleSelectionAll.length){
      //     this.multipleSelectionAll.map((item) => {
      //       data.push(item.uid)
      //     });
      //     this.userIds = data.join(',');
      //   }
      // }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          updateFormDep({termId:this.dynamicValidateForm.termId, depId: this.dynamicValidateForm.depId, id: this.dynamicValidateForm.id}).then(res => {
            this.$message.success('派件成功')
            this.loading = false
            this.Close()
            this.handleGetPhotoList()
         }).catch(() => {
            this.loading = false
          })
        } else {
          return false;
        }
      });
    },
    Close() {
      this.dialogVisible = false
      this.$refs['dynamicValidateForm'].resetFields();
    },

    // 详情
    onDetails(id){
      this.id = id
      this.Visible = true
    },
    hideEditDialog() {
      this.Visible = false
      this.handleGetPhotoList()
    },
    resetQuery(){
      this.listPram.keyword = ''
      this.listPram.questionType=null
      this.listPram.status=null
      this.listPram.selectCrtTime=[]
      this.listPram.selectDepId=null
      this.handleGetPhotoList()
    },
    derive(){
      this.$confirm('确定导出当前数据吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        computerApi.exportExcelApi({id:1}).then(res => {
          if(!createFile(res,'随手拍管理')){
            this.$message.error('未知的文件格式');
          }
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //处理
    setDeal(row){
      if(row){
        //this.userIds = row.uid
        this.dealDynamicValidateForm.id = row.id
        computerApi.getFormRemarkById({id:this.dealDynamicValidateForm.id}).then(res => {
          if (res){
            this.dealDynamicValidateForm.content = res.content;
            this.dealDynamicValidateForm.resultUrl = res.url;
          }else{
            this.dealDynamicValidateForm.content = ''
            this.dealDynamicValidateForm.resultUrl = []
          }
        })
      }else{
        this.dealDynamicValidateForm.id = 0
        this.dealDynamicValidateForm.content = ''
        this.dealDynamicValidateForm.resultUrl = []
      }
      //if (this.multipleSelectionAll.length === 0 && !row) return this.$message.warning('请选择要设置的用户')
      this.dealDialogVisible = true
    },
    submitDealForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.dealDynamicValidateForm.resultUrl.length === 0){
            this.$message.error('请上传图片')
            return false
          }

          this.dealLoading = true
          const _pram = {
            content:this.dealDynamicValidateForm.content,
            resultUrl: this.dealDynamicValidateForm.resultUrl.join(','),
            formId: this.dealDynamicValidateForm.id
          }
          computerApi.updateFormRemark(_pram).then(res => {
            this.$message.success('处理成功')
            this.dealLoading = false
            this.Close1()
            this.handleGetPhotoList()
          }).catch(() => {
            this.dealLoading = false
          })
        } else {
          return false;
        }
      });
    },
    Close1() {
      this.dealDialogVisible = false
      this.$refs['dealDynamicValidateForm'].resetFields();
    },
    handleRemove (i) {
      this.dealDynamicValidateForm.resultUrl.splice(i, 1)
    },
    // 点击图片 已弃用
    /*modalPicTap (tit, num, i,status) {
      const _this = this;
      if(_this.isDisabled) return;
      this.$modalUpload(function(img) {
        if(tit==='2'&& !num){
          if(img.length>6) return this.$message.warning("最多选择6张图片！");
          if(img.length + _this.dealDynamicValidateForm.resultUrl.length > 6) return this.$message.warning("最多选择6张图片！");
          img.map((item) => {
            _this.dealDynamicValidateForm.resultUrl.push(item.attDir)
          });
        }
      },tit, 'content')
    },*/
    // 移动
    handleDragStart (e, item) {
      if(!this.isDisabled) this.dragging = item;
    },
    handleDragEnd (e, item) {
      if(!this.isDisabled) this.dragging = null
    },
    handleDragOver (e) {
      if(!this.isDisabled) e.dataTransfer.dropEffect = 'move'
    },
    handleDragEnter (e, item) {
      if(!this.isDisabled){
        e.dataTransfer.effectAllowed = 'move'
        if (item === this.dragging) {
          return
        }
        const newItems = [...this.dealDynamicValidateForm.resultUrl]
        const src = newItems.indexOf(this.dragging)
        const dst = newItems.indexOf(item)
        newItems.splice(dst, 0, ...newItems.splice(src, 1))
        this.dealDynamicValidateForm.resultUrl = newItems;
      }
    },

    //申诉
    setAppeal(row){
      if(row){
        //this.userIds = row.uid
        this.appealDynamicValidateForm.id = row.id
        computerApi.getFormAppealById({id:this.appealDynamicValidateForm.id}).then(res => {
          if (res){
            this.appealDynamicValidateForm.content = res.content;
          }else{
            this.appealDynamicValidateForm.content = ''
          }
        })
      }else{
        this.appealDynamicValidateForm.id = 0
        this.appealDynamicValidateForm.content = ''
      }
      //if (this.multipleSelectionAll.length === 0 && !row) return this.$message.warning('请选择要设置的用户')
      this.appealDialogVisible = true
    },
    submitAppealForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.appealLoading = true
          computerApi.updateFormAppeal({content:this.appealDynamicValidateForm.content, formId: this.appealDynamicValidateForm.id}).then(res => {
            if(this.appealDynamicValidateForm.content === ''){
              this.$message.success('取消申诉成功')
            }else{
              this.$message.success('申诉成功')
            }
            this.appealLoading = false
            this.Close2()
            this.handleGetPhotoList()
          }).catch(() => {
            this.appealLoading = false
          })
        } else {
          return false;
        }
      });
    },
    Close2() {
      this.appealDialogVisible = false
      this.$refs['appealDynamicValidateForm'].resetFields();
    },
  }
}
</script>

<style scoped lang="scss">
  .selWidth{
    width:120px;
  }
  .timeWidth{
    width: 200px;
  }
  .table .showMore{
    display:block;
    width:100%;
    word-break:keep-all;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .pictrue{
    width: 120px;
    height: 120px;
    border: 1px dotted rgba(0,0,0,0.1);
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    .photo-el-image{
      width: 100%;
      height: 100%;
    }
    img{
      width: 100%;
      height: 100%;
    }
    video{
      width: 100%;
      height: 100%;
    }
  }
  .videoBox{
    width: 300px;
    height: 180px;
    //border: 1px dotted rgba(0,0,0,0.1);
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    border-radius:15px;
    img{
      width: 100%;
      height: 100%;
    }
    video{
      width: 100%;
      height: 100%;
      border-radius:15px;
    }
  }
  .btndel{
    position: absolute;
    z-index: 1;
    width :20px !important;
    height: 20px !important;
    font-size:20px;
    left: 100px;
    top: -2px;
  }
  .video-btndel{
    left: 282px;
    top: 1px;
  }
  .tips{
    color: #c0c4cc;
    font-size:14px;
  }
</style>
